<template>
  <el-form ref="form"  :model="form" label-width="80px">
    <el-form-item label="词根">
      <el-col :span="6">
          <el-input v-model="form.etyma" style="width:200px;text-align:left;"></el-input>
      </el-col>
      <el-col :span="6" :inline="true">
          等级：<el-rate v-model="form.lv" style="display:inline-block"></el-rate>
      </el-col>
    </el-form-item>
    <el-form-item label="解释">
      <el-input v-model="form.explanation" style="width:400px;text-align:left;"></el-input>
    </el-form-item>
    <el-form-item label="例词" ref="fdsfd">
        <el-tag closable v-for="item in form.eg" :key="item" @close="closeTag(item,form.eg)">{{item}}</el-tag>
        <el-input v-if="inputVisibleEg" ref="saveTagInputEg" @blur="handleInputConfirm()" @keyup.enter.native="handleInputConfirm()"   class="input-new-tag" v-model="inputEg"></el-input>
        <el-button v-else class="button-new-tag"  @click="showInput()" type="primary">+ New Word</el-button>
    </el-form-item>
    <el-form-item label="备注">
      <el-input type="textarea" v-model="form.remarks[0]"></el-input>
    </el-form-item> 
    <el-form-item>
      <el-button type="primary" @click="onSubmit">{{buttontxt}}</el-button>
      <el-button @click="close">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
        tempInputSentence:'',
        tempInputExplanation:'',
        inputVisibleSynonym:false,
        inputVisibleAntonym:false,
        inputVisiblePhrase:false,
        inputSynonym:'',
        inputAntonym:'',
        inputPhrase:'',
        region: "",

        inputVisibleEg:false,
        inputEg:'',
    };
  },
  computed:{
    ...mapGetters("etyma",{
         form:'form'
    }),
    buttontxt(){
      if(this.paneltype=='add')
        return '添加新词根';
      else
        return '更新';
    }
  },
  mounted(){
    console.log('mounted');
    console.log(this);
  },
  created(){
    console.log('created');
    console.log(this.form);
  },
  props:{
    formdata:{
      type:Object
    },
    paneltype:{type:String}
  },
  methods: {
    setFromData(formdata){
      this.$emit('setFormData_fromsub');
    },
    reset(){
      console.log('reset');
      //this.$emit('resetFromSub');
    },
    onSubmit() {
      console.log("submit!");
      console.log(this.form);
      if(this.paneltype=='add'){
        this.$emit('submitFromSub',this.form);
      }else{
        this.$emit('updateFromSub',this.form);
      }
      //this.reset();
    },
    showInput(){
      this.inputVisibleEg= true;
      console.log(this.$refs);
      this.$nextTick(()=>{
          this.$refs.saveTagInputEg.focus();
      });
    },
    handleInputConfirm(){
      let item = this.inputEg;
      if(item)
        this.form.eg.push(item);
      this.inputVisibleEg= false;
      this.inputEg="";
    },
    
    closeTag(tag,tags){
      tags.splice(tags.indexOf(tag),1);
    },
    close(){
      console.log('close');
      this.$emit('etymaeditCancel');
    }
  }
};
</script>
<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>